<script setup lang="ts">
import { ref, onMounted } from 'vue'
import PieEcharts from '../../../components/Echart/pieEcharts.vue'
import LineEchart from '../../../components/Echart/lineEchart.vue'
import BarEchart from '../../../components/Echart/barEchart.vue'
import TransverseLineEchart from '../../../components/Echart/transverseLineEchart.vue'
import { getAiAnswerService } from '@/api/ai'
import AiAssistant from '@/components/AI/ai.vue'

interface CollegeScore {
	collegeName: string
	studentName: string
	score: number
}

// 初始化

// 测试数据
const test_collegeData = [
	{ collegeName: '计算机学院', studentName: '张三', score: 395 },
	{ collegeName: '软件学院', studentName: '李四', score: 492 },
	// { collegeName: '交通学院', studentName: '王五', score: 288 },
	{ collegeName: '交通学院', studentName: '赵六', score: 285 },
	{ collegeName: '软件学院', studentName: '钱七', score: 390 },
	{ collegeName: '技工学院', studentName: '孙八', score: 187 }
	// { collegeName: '计算机学院', studentName: '周九', score: 290 },
	// { collegeName: '技工学院', studentName: '吴十', score: 390 },
	// { collegeName: '计算机学院', studentName: '郑十一', score: 290 }
	// ... 更多数据
]
const test_studentData = [
	{
		sid: '2134567890',
		studentName: '张三',
		collegeName: '软件学院',
		reason: '小抄',
		appendTime: '2024-12-12'
	},
	{
		sid: '2134533890',
		studentName: '李四',
		collegeName: '计算机学院',
		reason: '小抄',
		appendTime: '2024-12-21'
	},
	{
		sid: '2134567890',
		studentName: '王五',
		collegeName: '交通学院',
		reason: '小抄',
		appendTime: '2024-12-10'
	},
	{
		sid: '2133167890',
		studentName: '赵六',
		collegeName: '管理学院',
		reason: '小抄',
		appendTime: '2024-12-11'
	},
	{
		sid: '2155567890',
		studentName: '钱七',
		collegeName: '艺术学院',
		reason: '带手机',
		appendTime: '2024-12-12'
	},
	{
		sid: '2110567890',
		studentName: '孙八',
		collegeName: '体育学院',
		reason: '小抄',
		appendTime: '2024-12-21'
	},
	{
		sid: '2110167890',
		studentName: '周九',
		collegeName: '外语学院',
		reason: '带手机',
		appendTime: '2024-12-21'
	},
	{
		sid: '2131567890',
		studentName: '吴十',
		collegeName: '数学学院',
		reason: '小抄',
		appendTime: '2024-12-11'
	}
]
const testYAxisData = ['交通学院', '软件学院', '技工学院', '管理学院']
</script>

<template>
	<div class="school-data-container">
		<div class="data-row">
			<div class="data-card pie-chart">
				<div class="card-header">
					<h3>学院数据分布</h3>
				</div>
				<div class="card-content">
					<PieEcharts :title-show="false" :series-radius="'80%'"></PieEcharts>
				</div>
			</div>

			<div class="data-card transverse-chart">
				<div class="card-header">
					<h3>学院横向对比</h3>
				</div>
				<div class="card-content">
					<TransverseLineEchart :y-axis-data="testYAxisData"></TransverseLineEchart>
				</div>
			</div>
		</div>

		<div class="data-row">
			<div class="data-card">
				<div class="card-header">
					<h3>学院第一</h3>
				</div>
				<div class="card-content">
					<el-table
						:data="test_collegeData"
						:default-sort="{ prop: 'score', order: 'descending' }"
						stripe="true"
						height="300"
					>
						<el-table-column prop="collegeName" label="学院名称"></el-table-column>
						<el-table-column prop="studentName" label="学生姓名"></el-table-column>
						<el-table-column prop="score" label="分数" sortable></el-table-column>
					</el-table>
				</div>
			</div>

			<div class="data-card">
				<div class="card-header">
					<h3>违规记录</h3>
				</div>
				<div class="card-content">
					<el-table
						:data="test_studentData"
						:default-sort="{ prop: 'appendTime', order: 'descending' }"
						stripe="true"
						height="300"
					>
						<el-table-column prop="collegeName" label="学院名称"></el-table-column>
						<el-table-column prop="sid" label="学号" sortable></el-table-column>
						<el-table-column prop="studentName" label="学生姓名"></el-table-column>
						<el-table-column prop="reason" label="违规原因"></el-table-column>
						<el-table-column prop="appendTime" label="违规时间" sortable></el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.school-data-container {
	padding: 24px;
	background-color: #f5f7fa;
	min-height: 100%;
}

.data-row {
	display: flex;
	gap: 24px;
	margin-bottom: 24px;

	@media (max-width: 1200px) {
		flex-direction: column;
	}
}

.data-card {
	flex: 1;
	max-width: 500px;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.05),
		0 1px 2px rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.04);
	overflow: hidden;
	transition: all 0.3s ease;

	&:hover {
		box-shadow:
			0 1px 4px rgba(0, 0, 0, 0.07),
			0 2px 4px rgba(0, 0, 0, 0.04);
		transform: translateY(-1px);
	}
}

.card-header {
	padding: 12px 16px;
	border-bottom: 1px solid #ebeef5;

	h3 {
		margin: 0;
		font-size: 16px;
		font-weight: 500;
		color: #303133;
		position: relative;
		padding-left: 12px;

		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4px;
			height: 16px;
			background-color: #409eff;
			border-radius: 2px;
		}
	}
}

.card-content {
	padding: 24px;
	height: calc(100% - 42px);
}

.pie-chart,
.transverse-chart {
	.card-content {
		height: 320px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

:deep(.el-table) {
	border-radius: 4px;

	.el-table__header-wrapper th {
		background-color: #f5f7fa;
		color: #606266;
		font-weight: 500;
	}

	.el-table__row {
		transition: background-color 0.2s;

		&:hover {
			background-color: #ecf5ff !important;
		}
	}
}

.el-table {
	margin-top: 8px;
	width: 100%;
}
</style>
